
<template>
   <div class="Commodity">
          <header class="mui-bar mui-bar-nav mint-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收货地址</h1>
        	<h1 class="mui-title" style="position: relative;
          left: 69%;">兑奖规则</h1>
		</header>   
        <div class="mui-card">
            <div class="mui-card-content">
         <div class="mui-card-content-inner">
           <swiper :lunbotuList="lunbotuList"  :isfull="false"></swiper>
        </div>
      </div>
        </div>
        <div class="title">
            <div class="title1">苹果手机号苹果手机号苹果手机号</div>
            <div class="title2">720,5456,445 <img src="../../img/AwardingMall/商品详情金币.png" alt=""></div>
        </div>
        <div class="info">
            <div class="sum">已兑换总件数：45960件</div>
            <div class="number "> 选择数量：<span></span> <div class="f_right"><a>-</a><span>5</span><a>+</a></div></div>
            <div class="wuqu"><span class="zhengpin"><img src="../../img/AwardingMall/正品.png" alt=""> 保证正品 </span>  <span class="baoyou"><img src="../../img/AwardingMall/包邮.png" alt="">包邮</span></div>
        <mt-button size="large" type="danger" @click="purchase()">立即兑换</mt-button>
        </div>
        <div class="tail">商品详情</div>
   </div>
   
</template>
<script>
import swiper from "../subcomponents/swiper.vue";
export default {
  data() {
    return { lunbotuList: [] };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      this.$http.get("api/getlunbo").then(result => {
        console.log(result.body.status);
        if (result.body.status == 0) {
          this.lunbotuList = result.body.message;
        } else {
          Toast("NO");
        }
      });
    },
    purchase(){
      this.$router.push({ name: "Puchase"});}
  },
  components: {
    swiper
  }
};
</script>

<style lang="scss" scoped>

.Commodity{
    
 header {
    background: rgb(153, 9, 9);
   a{ color:#fff;}
   h1{color:#fff;}
  }    
     .mint-header {
    background: rgb(153, 9, 9);
  }
       background: #e0e0e0; 
     padding:0px;  
    .mui-card{
        background: #e0e0e0; 
         box-shadow:none; 
        .mui-card-content{
         .mui-card-content-inner{
            
         }
        }
    }
    .title{
        padding-top:20px; 
        padding-left: 20px;
       padding-bottom:20px;
       
       border-bottom:1px solid #e0e0ee;  
        background: #ffffff;
        .title1{
            font-size:20px;
             padding-bottom: 20px;
        }
        .title2{
            color:#d51313;
            font-size:20px;
            img{
                height:20px;
            }
        }
        
    }
    .info{
        padding-bottom:20px; 
         padding-left: 20px;
         padding-right:20px; 
        background: #ffffff;
        padding-top: 10px ;
       .sum{
           padding-bottom:10px;
           font-size:18px; 
       }     
       .number{
           padding-right:20px; 
            font-size:18px; 
            padding-bottom:10px; 
           a{
                font-size: 35px;
                 margin-bottom: 0;
           } 
       .f_right{
             span{
                 position: relative;
                 top:-5px;;
                 display: inline-block;
               width: 44px;
             padding: 0px;
             font-size: 20px;
             text-align: center;
           
           }
       }
       }
       .wuqu{
           padding-top:20px; 
            .zhengpin{
                height: 54px;
                font-size: 18px;
                display: inline-block;
                line-height: 54px;
                img{
                    position: relative;
                    top:11px;
                    margin-right:10px; 
                }
                margin-right:20px; 
            }
            .baoyou{
                    height: 54px;
                font-size: 18px;
                display: inline-block;
                line-height: 54px;
                img{
                    position: relative;
                    top:11px;
                      margin-right:10px; 
                }
            }
       }
      .mint-button{
           margin-top:20px;
        
       }
         
    }
    .tail{
        padding:20px 0; 
        text-align: center;
        font-size:20px;
    }
}
</style>    
